<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
    <style>
        .error{
            color:red
        }
        .success{
            color:green;
        }
    </style>
</head>
<body>
    <div id="app">
        <div>
            用户名 <input type="text" v-model="username"/>
            <span :class="usernameclass">{{usernametip}}</span>
        </div>
        <div>
            密码 <input type="text" v-model="userpwd"/>
            <span :class="userpwdclass" v-html="userpwdtip"></span>
        </div>
        <div>
            手机号 <input type="text" v-model="usertel"/>
            <span :class="usertelclass">{{userteltip}}</span>
        </div>
        <button @click="submit">验证</button>
    </div>
    
</body>
<script>
    new  Vue({
        el:"#app",
        data:{
            username:"",
            usernameclass:"error",
            usernametip:"请输入数字字母_$组成长度6到10位不能以数字开头",
            usernamereg:/^[a-z_$][a-z0-9_$]{5,9}$/i,

            userpwd:"",
            userpwdclass:"error",
            userpwdtip:"请输入数字字母组成长度6到12位",
            userpwdreg:/^[a-z0-9]{6,12}$/i,

            usertel:"",
            usertelclass:"error",
            userteltip:"请输入常用的11位手机号",
            usertelreg:/^1[3-9][0-9]{9}$/


        },
        watch:{
            username(){
                this.checkAttr("username","请输入数字字母_$组成长度6到10位不能以数字开头")
            },
            userpwd(){
                if(this.checkAttr("userpwd","请输入数字字母组成长度6到12位")){
                    //格式正确以后 判断强度
                    let numReg = /[0-9]/; //数字的正则表达式
                    let upperReg = /[A-Z]/;
                    let lowerReg = /[a-z]/;//大小写的正则表达式

                    let count = numReg.test(this.userpwd) + upperReg.test(this.userpwd) + lowerReg.test(this.userpwd);

                    switch(count){
                        case 3:
                            this.userpwdtip = "<button style='width:150px'>强</button>";
                            break;
                        case  2:
                            this.userpwdtip = "<button style='width:100px'>中</button>";
                            break;
                        case   1:
                            this.userpwdtip = "<button style='width:50px'>弱</button> ";        
                    }

                

                }
            },
            usertel(){
                this.checkAttr("usertel","请输入常用的11位手机号");   
            }
        },
        methods:{

            checkAttr(attr,tip){//封装一个函数 去验证属性是否正确
                //attr表示username  tip:请输入数字字母_$组成长度6到10位不能以数字开头
                if(this[attr+"reg"].test(this[attr])){
                    this[attr+"tip"] = "√";
                    this[attr+"class"]="success";
                    return true;
                }else{
                    this[attr+"tip"] = tip;
                    this[attr+"class"]="error";
                    return false;
                }
            },

            submit(){
                    if(this.usernameclass == "success" && this.userpwdclass == "success"  && this.usertelclass=="success"){
                        alert("验证通过");
                    }else{
                        alert("请查看红色提示");
                    }
                 
                 
              
            }
        }
    })

</script>
</html>